/** @type {HTMLCanvasElement} */
const mycanvas = document.getElementById("canvas")

const ctx = mycanvas.getContext("2d")
dw();

function dw() {
  mycanvas.onmousedown = function () {
    let y1 = event.offsetY;
    let x1 = event.offsetX;
    mycanvas.onmousemove = function () {
      let y = event.offsetY;
      let x = event.offsetX;
      // ctx.save();
      ctx.beginPath();
      ctx.lineCap = 'round';
      ctx.lineJoin = 'round'
      ctx.lineWidth = 10;
      ctx.lineTo(x1, y1);
      ctx.lineTo(x, y);
      ctx.lineWidth = 10;
      ctx.stroke();
      // ctx.restore();
      x1 = x;
      y1 = y
    }
  }
}
mycanvas.onmouseup = function () {
  mycanvas.onmousedown = null;
  mycanvas.onmousemove = null;
  dw();
}
mycanvas.onmouseleave = function () {
  mycanvas.onmousedown = null;
  mycanvas.onmousemove = null;
  dw();
}